<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" class="vke">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"/>
    <title>推广员信息-zscat </title>
    <link rel="stylesheet" href="/wx/css/weui.css"/>
    <link rel="stylesheet" href="/wx/css/ifMe.css"/>
    <style>
        *{margin:0; border:0; padding:0; font-size:13pt;}
        #nav{border-top:#060 2px solid;border-bottom:#060 2px solid;padding:5px 0;}
        #nav ul{list-style:none;margin-left:5px;}
        #nav li{display:inline;}
        #nav a{ color: #586C94;
            display: inline-block;
            vertical-align: top;
            /*margin: 0.62em;*/
            position: relative;}
    </style>
    <script src="/wx/jquery/jquery.min.js"></script>
    <script src="/wx/jquery/jquery-weui.min.js"></script>
</head>
<body>
<div class="page below">
    <div class="page__hd">
        <h1 class="page__title">我的推广员</h1>
        <div class="weui-cells">
            <div class="weui-cell">
                <div class="weui-cell__hd" style="position: relative;margin-right: 10px;">
                    <img th:src="${user.wxAvatar}" style="width: 50px;display: block"/>
                </div>
                <div class="weui-cell__bd">
                    <p th:text="${user.wxNickname}"></p>
                    <p style="font-size: 13px;color: #888888;">等级: <span th:text="${user.level}"></span>级</p>
                </div>
            </div>
        </div>
        <div class="weui-progress">
            <div class="weui-progress__bar">
                <div class="weui-progress__inner-bar js_progress"></div>
            </div>
        </div>
        <p class="page__desc">注:当你有<span class="page__desc" th:text="${upSchedule}"/>个相同1级下线时，你将成为2级，以此类推</p>
    </div>
    <input type="hidden" th:value="${schedu}" id="scheduId" />
    <div id="nav">
    <ul id="navli">
        <li><a href="/wx/h5/below/index">我的推广员></a></li>
    </ul>
    </div>
    <div id="tableInclude">

    </div>
    <div th:replace="tab"></div>
</div>
<script type="text/javascript">
    $(".weui-progress__inner-bar").width($("#scheduId").val());
    belowIf();
    function belowIf(ifcode, upifcode, nickname) {
        if ($("#navli li").length>5){
            alert("只显示6个层级");
            return false;
        }else{
            var _timer = null;
            $.ajax({
                url: "/wx/h5/below/list",
                data: {
                    "ifcode": ifcode
                },
                type: 'post',
                dataType: 'text',
                beforeSend: function () {
                    clearTimeout(_timer);
                },
                success: function (result) {
                    _timer = setTimeout(function () {
                        $("#tableInclude").html(result);
                        if(ifcode!=undefined){
//                        $("#navli li:last-child").remove();

//                        if(upifcode!=undefined) {
//                            var bb = upifcode + '>';
//                            var c = '<li><a onclick="belowIf1(this,'+upifcode+')" href="#">'+bb+'</a></li>';
//                            $(c).appendTo("#navli");
//                        }
                            var b= nickname + '>';
                            var d='<li><a name="'+ifcode+'" onclick="belowIf1(this,'+ifcode+')">'+b+'</a></li>';
                            var code_old=$("#navli li:last-child").children('a')[0].name;
                            if(parseInt(code_old)==ifcode){
                                return;
                            }else{
                                $(d).appendTo("#navli");
                            }
                        }

                    }, 300);
                }
            });
        }

    };

    function belowIf1(th,ifcode) {
        console.log(th);
        var _timer = null;
        var self=$(th);
        $.ajax({
            url: "/wx/h5/below/list",
            data: {
                "ifcode": ifcode
            },
            type: 'post',
            dataType: 'text',
            beforeSend: function () {
                clearTimeout(_timer);

            },
            success: function (result) {
                _timer = setTimeout(function () {
                    $("#tableInclude").html(result);
                    self.parent().nextAll().remove();
                }, 300);
            }
        });
    };
</script>
</body>
</html>